<template>
  <div class="frame">
    <el-card v-model="blog" :key="blog.id">
      <div class="blog-card">
        <div class="blog-title">
          {{ blog.title }}
        </div>
        <el-divider class="el-divider-horizontal"></el-divider>
        <div class="blog-meta">
          <div class="left-info">
            <router-link :to="`/user/${blog.author_id}`">{{ blog.author }}</router-link>
            <span class="info-item">{{ blog.created_at }}</span>
            <div class="blog-tags">
              <el-tag
                v-for="tag in blog.tags"
                :key="tag"
                size="small"
                effect="light"
                @click="handleTagClick(tag)"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="right-info">
            <el-icon class="icon-view">
              <View />
            </el-icon>
            <span class="info-item">浏览-{{ blog.views }}</span>
            <el-divider
              class="el-divider-vertical"
              direction="vertical"
            ></el-divider>
            <el-icon class="icon-star" @click="handleStarClick">
              <StarFilled v-if="isStarTagged" />
              <Star v-if="!isStarTagged" />
            </el-icon>
            <span class="info-item">赞-{{ blog.stars }}</span>
          </div>
        </div>
        <el-divider class="el-divider-horizontal"></el-divider>
        <el-text>
          {{ blog.content }}
        </el-text>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import { View, StarFilled } from "@element-plus/icons-vue";

  import { useRoute } from "vue-router";
  import { type Blog, defaultBlog } from "@/types/blog";
  import { apiGetBlog, apiStarInc, apiStarDec } from "@/api/blog";

  const route = useRoute();

  let blog: Blog = reactive(defaultBlog());

  const isStarTagged = ref(false);

  // 页面加载时获取第一页的博客
  onMounted(async () => {
    blog.id = Number(route.query.id);
    // alert("Blog onMounted: " + blog.id)
    try {
      const _blog = await apiGetBlog(blog.id);
      if (_blog.id > 0) {
        // 不能 blog = _blog，因为blog是响应式对象，这样会被破坏
        // 也可以 blog = reactive(_blog)，不过需要创建新的响应式对象
        Object.assign(blog, _blog);
      }
    } catch (err) {
      alert(err);
    }
  });

  function handleTagClick(tag: string) {
    alert("Handle Tag Click: " + tag);
  }

  function handleStarClick() {
    // isStarTagged.value = isStarTagged.vaule == true ? false : true;

    if (!isStarTagged.value) {
      isStarTagged.value = true;
      ElMessage.success("点赞");
      async () => {
        try {
          const stars = await apiStarInc(blog.id);
          if (stars > 0) {
            blog.stars = stars;
          }
        } catch (err) {
          alert(err);
        }
      };
    } else {
      isStarTagged.value = false;
      ElMessage.success("取消点赞");
      async () => {
        try {
          const stars = await apiStarDec(blog.id);
          if (stars > 0) {
            blog.stars = stars;
          }
        } catch (err) {
          alert(err);
        }
      };
    }
  }
</script>

<style scoped>
  .frame {
    /* min-height: 100vh; */
    /* display: flex; */
    display: block;
    width: 80%;
    margin-left: 10%;
    margin-top: 0%;
  }

  @media (max-width: 1024px) {
    .frame {
      width: 100%;
      margin-left: 0;
    }
  }

  .el-card {
    margin-bottom: 2px;
    border-radius: 10%;
    background-color: #f3f1f1;

    .blog-card {
      width: 80%;
      margin-left: 10%;
    }
  }

  .blog-title {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .blog-meta {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #999;
  }

  .left-info {
    display: flex;
    align-items: center;
  }

  .right-info {
    display: flex;
    align-items: center;
  }

  .info-item {
    margin-left: 10px; /* 增加元素之间的间距 */
  }

  .el-text {
    font-size: 16px; /* 调整内容字体大小 */
    color: #252525;
    margin-top: 10px;
  }

  .blog-tags {
    margin: 6px 6px; /* 为标签添加间距 */
  }

  /* 水平分割线 */
  .el-divider-horizontal {
    margin: 5px 0; /* 增加分割线的间距 */
  }

  /* 垂直分割线 */
  .el-divider-vertical {
    margin: 0 5px; /* 增加分割线的间距 */
  }

  .el-tag {
    margin-left: 5px;
  }

  .icon-view {
    margin-left: 10px;
    size: 20px;
    color: #0a0a0a;
  }

  .icon-star {
    margin-left: 10px;
    size: 20px;
    color: #ffd700;
  }
</style>
